<template>
  <x-page title="排行榜" class="x-page-topLists">
    <cell-box v-for="(item, index) in topLists" :key="index" class="topic_item" is-link :link="`/songLists/${item.id}`">
      <div class="topic_main">
        <a class="topic_media">
          <x-img :src="item.picUrl" height="100px" />
          <span class="listen_count">播放量:{{item.listenCount | statistical}}</span>
        </a>
        <div class="topic_info">
          <div class="topic_cont">
            <h3 class="topic_title">{{item.topTitle}}</h3>
            <template v-if="item.songList && item.songList.length">
              <p v-for="(song, i) in item.songList">{{i+1}} <span class="song_name">{{song.songname}}</span> - {{song.singername}}</p>
            </template>
          </div>
        </div>
      </div>
    </cell-box>
  </x-page>
</template>

<script>
import { AjaxPlugin, CellBox, XImg } from 'vux'
export default {
  name: 'topLists',
  components: { AjaxPlugin, CellBox, XImg },
  data () {
    return {
      params: {
        g_tk: 1928093487,
        uin: 0,
        loginUin: 411985844,
        hostUin: 0,
        format: 'json',
        inCharset: 'utf8',
        outCharset: 'utf-8',
        notice: 0,
        platform: 'yqq',
        needNewCode: 0
      },
      topLists: []
    }
  },
  filters: {
    statistical: (val) => {
      let statistics = ''
      if (val > 10000) {
        statistics = (val / 10000).toFixed(1) + '万'
      } else {
        statistics = `${val}次播放`
      }
      return statistics
    }
  },
  methods: {
    queryTopList () {
      let url = `${this.HOST}/v8/fcg-bin/fcg_myqq_toplist.fcg`
      AjaxPlugin.$http.get(url, {params: this.params}).then(res => {
        if (res && res.request && res.request.response) {
          let datas = JSON.parse(res.request.response)
          this.topLists = datas.data && datas.data.topList ? datas.data.topList : []
          console.log(this.topLists)
        }
      }).catch(e => {
        console.log(e)
      })
    }
  },
  created () {
    this.queryTopList()
  }
}
</script>

<style scoped>

</style>
